<template>
    <div class="postlist-container">
        <loading :flag="loading"></loading>
        <div class="postlist-main" v-if="!loading">
            <ul>
                <li v-for="item in lists" :key="item.id">
                    <router-link :to="{ name: 'user_info',params: { name: item.author.loginname }}">
                        <img v-lazy="item.author.avatar_url" :title="item.author.loginname">
                    </router-link>
                    <span>
                        {{ item.reply_count }}/{{ item.visit_count }}
                    </span>
                    
                    <router-link 
                        :to="{ name: 'post_content',params: { id: item.id,name: item.author.loginname } }" 
                        class="title">
                        {{ item.title }}
                    </router-link>

                    <span class="last-reply">
                        {{ item.last_reply_at | dateFormat}}
                    </span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import loading from './subcomponents/loading.vue'

export default {
    name: 'PostList',
    data(){
        return {
            lists: [],
            loading: false
        }
    },
    mounted(){
        this.loading = true
        this.getData()
    },
    methods: {
        getData(){
            this.axios({
                url: 'https://cnodejs.org/api/v1/topics',
                method: 'get',
                params: {
                    page: 1,
                    limit: 20
                }
            })
            .then(res=>{
                // console.log(res)
                if(res.data.success===true){
                    this.lists = res.data.data
                    this.loading = false
                    // console.log(this.lists)
                }
            })
            .catch(err=>{
                console.log(err)
            })
        }
    },
    components: {
        loading 
    }
}
</script>

<style lang="scss" scoped>
    .postlist-container {
        .postlist-main {
            background-color: #fff;
            padding: .5rem;
            margin: .5rem 3rem;

            li {
                list-style: none;
                line-height: 30px;
                border-bottom: 1px solid #e7e7e7;
                margin-bottom: .5rem;
                display: flex;

                img {
                    width: 1.5rem;
                    height: 1.5rem;
                    cursor: pointer;
                }

                span {
                    font-size: 12px;
                    text-align: center;
                    margin: 0 30px;
                }

                span.last-reply {
                    margin-left: auto;
                }

                a.title {
                    max-width: 72%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    text-decoration: none;
                    color: inherit;
                    cursor: pointer;
                }
                a:visited {
                    color:#858585;
                }
            }
        }
    }
</style>
